<template>
	<view class="gossip">
		<view class="gossip-rotate">
			<!--components/gossip.wxml-->
			<view class="gossip-container">
				<!-- 6 -->
				<view class="side" @click="changeNumber(6)">
					<view>
						<view class="side-number">6</view>
						<view>

							<view class="line-flex">
								<view class="line" />
								<view class="line" />
							</view>
							<view class="line line-margin"></view>
							<view class="line-flex">
								<view class="line" />
								<view class="line" />
							</view>
						</view>
					</view>
				</view>
				<!-- 5 -->
				<view class="side" @click="changeNumber(5)">
					<view>
						<view class="side-number">5</view>
						<view>
							<view class="line" />
							<view class="line  line-margin" />
							<view class="line-flex">
								<view class="line" />
								<view class="line" />
							</view>
						</view>
					</view>
				</view>
				<!-- 1 -->
				<view class="side" @click="changeNumber(1)">
					<view>
						<view class="side-number">1</view>
						<view>
							<view class="line"></view>
							<view class="line  line-margin"></view>
							<view class="line"></view>
						</view>
					</view>
				</view>
				<!-- 2 -->
				<view class="side" @click="changeNumber(2)">
					<view>
						<view class="side-number">2</view>
						<view>
							<view class="line-flex">
								<view class="line" />
								<view class="line" />
							</view>
							<view class="line line-margin"></view>
							<view class="line"></view>
						</view>
					</view>
				</view>
				<!-- 7 -->
				<view class="side" @click="changeNumber(7)">
					<view>
						<view class="side-number">7</view>
						<view>
							<view class="line"></view>
							<view class="line-flex line-margin">
								<view class="line" />
								<view class="line" />
							</view>
							<view class="line-flex line-margin">
								<view class="line" />
								<view class="line" />
							</view>
						</view>
					</view>
				</view>
				<!-- 8 -->
				<view class="side" @click="changeNumber(8)">
					<view>
						<view class="side-number">8</view>
						<view>
							<view class="line-flex line-margin">
								<view class="line" />
								<view class="line" />
							</view>
							<view class="line-flex line-margin">
								<view class="line" />
								<view class="line" />
							</view>
							<view class="line-flex line-margin">
								<view class="line" />
								<view class="line" />
							</view>
						</view>
					</view>
				</view>
				<!-- 4 -->
				<view class="side" @click="changeNumber(4)">
					<view>
						<view class="side-number">4</view>
						<view>
							<view class="line-flex">
								<view class="line" />
								<view class="line" />
							</view>
							<view class="line-flex line-margin">
								<view class="line " />
								<view class="line" />
							</view>
							<view class="line"></view>
						</view>
					</view>
				</view>
				<!-- 3 -->
				<view class="side" @click="changeNumber(3)">
					<view>
						<view class="side-number">3</view>
						<view>
							<view class="line"></view>
							<view class="line-flex line-margin">
								<view class="line  " />
								<view class="line" />
							</view>
							<view class="line"></view>
						</view>
					</view>
				</view>
				<!-- 中心圆 -->
				<view class="gossip-circle" :class="isPlay?'':'animation-state'">
					<view class="circle-white" @click="changeNumber(0)">
						<view class="white circle-after" />
					</view>
					<view class="circle-black" @click="changeNumber('·')">
						<view class="black circle-after" />
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script lang="ts" setup>
	const emit = defineEmits(["changeNumber"]);
	defineProps({
		isPlay: {
			type: Boolean,
			default: () => false
		},
	});
	function changeNumber(number : any) {
		emit("changeNumber", number)
	}
</script>

<style lang="scss" scoped>
	.gossip {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
	}

	.gossip-rotate {
		transform: rotate(90deg);
	}

	.gossip-container {
		width: 600rpx;
		height: 700rpx;
		margin: auto;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: rotate(-90deg);
	}

	.yang {
		position: absolute;
		width: 26rpx;
		height: 26rpx;
		top: 50%;
		transform: translateY(-50%);
		background-color: #000;
		right: 55rpx;
		border-radius: 50%;
	}

	.yin {
		background-color: #fff;
		position: absolute;
		border-radius: 50%;
		width: 26rpx;
		height: 26rpx;
		top: 50%;
		transform: translateY(-50%);
		left: 55rpx;
		z-index: 99;
	}

	.gossip-circle {
		background-color: #fff;
		box-sizing: border-box;
		margin: auto;
		overflow: hidden;
		width: 300rpx;
		height: 300rpx;
		border: 6rpx solid #000;
		border-radius: 50%;
		position: relative;
		background-image: linear-gradient(to bottom, white 50%, black 50%);
		animation: rotate 10s linear infinite;
	}

	.rotate0 {
		animation: rotate 3s linear infinite;
	}

	.animation-state {
		animation-play-state: paused
	}

	.gossip-circle::before {
		background-color: white;
		right: 0;
	}

	.circle-white {
		height: 152rpx;
		z-index: 2;
		background-color: #fff;
		position: relative;
	}

	.white {
		right: 0;
		top: 50%;
		border: 60rpx solid #fff;
		background-color: #000;
	}

	.circle-black {
		height: 152rpx;
		background-color: #000;
		position: relative;
	}
.black{left: 0;top: 0%;border: 60rpx solid #000;background-color: #fff;transform: translateY(-50%);}
	.circle-after {
		position: absolute;
		width: 146rpx;
		height: 146rpx;
		box-sizing: border-box;
		z-index: 9;
		border-radius: 50%;
	}

	.gossip-circle::after {
		background-color: black;
		left: -1rpx;
	}

	// .gossip-circle::before,
	// .gossip-circle::after {
	// 	content: '';
	// 	position: absolute;
	// 	width: 151rpx;
	// 	height: 151rpx;
	// 	border-radius: 50%;
	// 	top: 50%;
	// 	transform: translateY(-50%);
	// }


	.side {
		width: 90rpx;
		padding: 0 50rpx;
		height: 100rpx;
		position: absolute;
		z-index: 9;
		text-align: center;
	}

	.side:nth-child(3) {
		transform: rotate(0deg) translateY(-300rpx);
	}

	.side:nth-child(2) {
		transform: rotate(45deg) translateY(-300rpx);
	}

	.side:nth-child(1) {
		transform: rotate(90deg) translateY(-300rpx);
	}

	.side:nth-child(5) {
		transform: rotate(135deg) translateY(-300rpx);
	}

	.side:nth-child(6) {
		transform: rotate(180deg) translateY(-300rpx);
	}

	.side:nth-child(7) {
		transform: rotate(225deg) translateY(-300rpx);
	}

	.side:nth-child(8) {
		transform: rotate(270deg) translateY(-300rpx);
	}

	.side:nth-child(4) {
		transform: rotate(315deg) translateY(-300rpx);
	}

	.line {
		width: 100%;
		height: 16rpx;
		background-color: #000;
		border-radius: 2rpx;
	}

	.line-margin {
		margin: 8rpx 0;
	}

	.line-flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.line-flex .line:nth-child(1) {
		margin-right: 6rpx;
	}

	.side-number {
		font-family:Helvetica Neue, Helvetica, Arial;
		font-size: 70rpx;
		margin-bottom: 6rpx;
		font-weight: 500;
	}

	.animation {
		animation: yinyangRotate 10s infinite linear forwards;
	}

	@keyframes rotate {
		100% {
			transform: rotate(360deg)
		}
	}

	@keyframes rotate0 {

		100% {
			transform: rotate(0deg)
		}
	}
</style>